<template>
    <section>
        <!--工具条-->
        <el-row :gutter="20">
            <!-- <div style="font-size: 20px;font-weight: bold;margin: 0 0 10px 0;padding-left: 10px;">平台数据信息统计</div> -->
            <!-- 上面四个标签 -->
            <div style="overflow: hidden;">
                <div style="padding:12px 15px;display: flex;" class="col-background clearfix statistics">
                    <div class="top-label">
                        <div class="top-label-border">
                            <div class="Statisticsimage">
                                <img src="../../assets/index/device.png" alt="">
                                <span class="top-lable-text">设备统计(个)</span>
                            </div>
                            <div class="top-label-data">
                                <div class="top-label-num">{{devicetypeCount.totalCount? devicetypeCount.totalCount:0}}</div>
                                <div>
                                    <div class="onoffline">在线 {{devicetypeCount.onlineCount? devicetypeCount.onlineCount:0}}</div> 
                                    <div class="onoffline alarm-color">离线 {{devicetypeCount.offlineCount? devicetypeCount.offlineCount:0}}</div>
                                </div> 
                            </div>  
                        </div>
                    </div>
                    <div class="top-label">
                        <div class="top-label-border">
                            <div class="Statisticsimage">
                                <img src="../../assets/index/people.png" alt="">
                                <span class="top-lable-text">经销商(件)</span>
                            </div>
                            <div class="top-label-data">
                                <div class="top-label-num">{{companyCount}}</div>
                            </div>  
                        </div>
                    </div>
                    <div class="top-label">
                        <div class="top-label-border">
                            <div class="Statisticsimage">
                                <img src="../../assets/index/work.png" alt="">
                                <span class="top-lable-text">工单统计(个)</span>
                            </div>
                            <div class="top-label-data">
                                <!-- <div class="top-label-num">{{conversationCount.total}}</div> -->
                                <div class="top-label-num">{{Number(conversationCount.total)? Number(conversationCount.total):0}}</div>
                                <div>
                                    <div class="onoffline">已处理 {{conversationCount.alreadyDeal? conversationCount.alreadyDeal:0}}</div> 
                                    <div class="onoffline alarm-color">未处理 {{conversationCount.notDeal? conversationCount.notDeal:0}}</div>
                                </div> 
                            </div>  
                        </div>
                    </div>
                    <div class="top-label">
                        <div class="top-label-border">
                            <div class="Statisticsimage">
                                <img src="../../assets/index/alarm.png" alt="">
                                <span class="top-lable-text">告警统计(起)</span>
                            </div>
                            <div class="top-label-data">
                                <!-- <div class="top-label-num">{{alarm_count.total>0? alarm_count.total:0}}</div> -->
                                <div class="top-label-num">{{Number(alarm_count.total? alarm_count.total:0)}}</div>
                            </div>  
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中间部分 -->
            <div style="margin-top: 10px;display: flex;">
                <div style="width: 31%;" class="col-background">
                    <div class="dev-titles">报警数量走势图</div>
                    <div style="width: 100%;height: 23vh;" id="alarms" ref="alarms"></div>
                </div>
                <div style="width: 31%;margin-left: 1%;position: relative;" class="col-background">
                    <div class="dev-titles">告警类型统计</div>
                    <div style="width: 100%;height: 23vh;" id="alarmType" ref="alarmType"></div>
                    <div class="alarm-type-middle">
                        <div style="color: #07233A;font-size: 30px;font-weight: bold;">3</div>
                        <div style="color:#AFB5BF;font-size: 15px;">告警总类型</div>
                    </div>
                    <div class="alarm-type-bottom">
                        <div class="color-block ordinary-alarm">
                            <div class="alarm-num">{{alarm_count.level0}}</div>
                            <!-- <div class="alarm-num">10</div> -->
                            <div class="alarm-text">一般告警</div>
                        </div>
                        <div class="color-block important-alarm">
                            <div class="alarm-num">{{alarm_count.level1}}</div>
                            <!-- <div class="alarm-num">2</div> -->
                            <div class="alarm-text">重要告警</div>
                        </div>
                        <div class="color-block urgent-alarm">
                            <div class="alarm-num">{{alarm_count.level2}}</div>
                            <!-- <div class="alarm-num">1</div> -->
                            <div class="alarm-text ">紧急告警</div>
                        </div>
                    </div>
                </div>
                <div style="width: 35%;margin-left: 1%;" class="col-background" >
                    <div class="dev-titles">设备类型统计</div>
                    <div style="width: 100%;height: 23vh;overflow: hidden;" >
                        <div class="device-type-table">
                            <div class="table-col" v-for="item in deviceTypeList1">
                                <div class="tabel-title">
                                    <span :title="item.name">{{item.name}}</span>
                                </div>
                                <div class="tabel-num">
                                    <span>{{item.sum}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="device-type-table">
                            <div class="table-col" v-for="item in deviceTypeList2">
                                <div class="tabel-title">
                                    <span :title="item.name">{{item.name}}</span>
                                </div>
                                <div class="tabel-num">
                                    <span>{{item.sum}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-pagination style="position: absolute;bottom: 10px;right: 27px;" small background layout="prev, pager, next" :page-size="8" :total="devicetypeTotal" @current-change="devicetypeChange"></el-pagination>
                </div>
            </div>
            <div style="margin-top: 10px;display: flex;">
                <div style="width: 65%;height: 34vh;" class="col-background">
                    <div class="dev-titles">
                        设备销售统计
                        <!-- <div class="fr timeslot">
                            <span>最近30日</span>
                        </div> -->
                        <div style="float: right;">
                            <el-date-picker v-model="timeslot" type="monthrange" align="right" size="mini" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="getDeviceSales">
                            </el-date-picker>
                        </div>
                    </div>
                    <div id="devicechart" style="width:95%; height:30vh; float: left;"></div>
                </div>
                <div style="width: 35%;margin-left: 1%;height: 34vh;" class="col-background">
                    <div class="dev-titles">经销商设备数量</div>
                    <div style="margin-top:20px">
                        <el-table :data="deviceList" style="width: 100%" :header-row-style="{backgroundColor:'#FAFAFA',color:'#969696'}">
                            <el-table-column label="序号" width="100" align="center" type="index"></el-table-column>
                            <el-table-column  prop="name" label="经销商名称"></el-table-column>
                            <el-table-column  prop="sum" label="设备数量"></el-table-column>
                        </el-table>
                        <el-pagination style="position: absolute;bottom: 10px;right: 27px;" small background layout="prev, pager, next" :page-size="5" :total="distributorTotal" @current-change="getDistributor"></el-pagination>

                    </div>
                </div>
            </div>
    </el-row>
    </section>
</template>
<script>
    import echarts from "echarts";
    import {
        company_get_my,
        device_get_query_user_count,
        userinfo,
        device_get_user_count,
        get_device_equi_type,
        get_alarm_log_countLevel,
    } from '../../api/api';
    import { get_countDeviceType, get_user_count,get_companyNum, get_conversationCount, get_countLevel, get_data_sum, get_device_type, get_device_sales, get_company_device } from '../../api/index'
    import {numFormat} from '@/common/globe.js'
    //import NProgress from 'nprogress'
    export default {
        data() {
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().getFullYear(), 0);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 6);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                imgloading: true,
                imgUrl: '',
                device_list: '',
                useritem: '',
                loading: false,
                users: [],
                facility: {},
                selectlist: {
                    name: '',
                    unit: ''
                },
                vertical: '',
                alarmchart:"",
                conversationCount:"",//工单统计
                devicetypeCount:"",//设备在线离线（包含子用户）
                alarm_count:"",//报警状态总数
                companyCount:"",//经销商总数
                companyDeviceNum:'',//经销商设备数量
                equicount:"",
                alarmdatelist:[],
                alarmnumlist:[],
                sellChar:"", //设备销售统计图
                activateList:[],//激活数组
                salesedList:[],//销售数组
                warehouseList:[],//生产数组
                deviceDateList:[],//设备销售统计的日期数组
                timeslot:[],//选择月份的时间段
                devicetypePageNo: 1,//设备类型当前页数
                devicetypeTotal:'',//设备类型总页数
                distributorTotal: 1,//经销商设备数量
                distributorPageNo: 1,//经销商设备当前页数
                deviceList:[
                // {
                //     num:'100',
                //     name:'鸣泽有限公司'
                // },{
                //     num:'300',
                //     name:'郴毅有限公司'
                // },{
                //     num:'400',
                //     name:'君煌有限公司'
                // },{
                //     num:'400',
                //     name:'辉建有限公司'
                // },{
                //     num:'400',
                //     name:'振正有限公司'
                // }
                ],//设备数量列表
                deviceTypeList1:[
                // {
                //     name: '单冷',
                //     num: '365'
                // },{
                //     name: '热泵',
                //     num: '35'
                // },{
                //     name: '部分热回收',
                //     num: '40'
                // },{
                //     name: '全热回收',
                //     num: '888'
                // }
                ],//设备类型列表1
                deviceTypeList2:[
                // {
                //     name: '空调制冷',
                //     num: '365'
                // },{
                //     name: '空调制热',
                //     num: '35'
                // },{
                //     name: '空调制冷时进行热回收',
                //     num: '40'
                // },{
                //     name: '单独运行热水器',
                //     num: '888'
                // }
                ],//设备类型列表2
            }
        },
        computed:{
            titleColor(){
                return this.$store.state.titleColor
            }
        },
        mounted() {
            let _this = this;
            console.log(_this);
            //初始化设备统计的时间
            let {startTime,endTime} = _this.deafultStartTime()
            _this.timeslot = [startTime,endTime]
            _this.getAlarmlogsum()
            _this.getConversationCount()
            _this.getCountDeviceType()
            _this.getDeviceType()
            _this.getAlarmlogCount()
            _this.getCompanyNum()
            _this.getDeviceSales()
            _this.getCompanyDeviceNum()
            // this.getUser();
            setTimeout(() => {
                _this.drawvertical()
                // _this.drawAlarmTypeChart()
                // _this.deviceSellChar()
            }, 500);
            window.addEventListener('resize', () => {
                _this.vertical.resize();
                _this.alarmchart.resize();
                _this.sellChar.resize();
            })
            // window.onresize = () => {
            //     console.log(1);
            //     return (() => {
            //         _this.alarmchart.resize();
            //         _this.vertical.resize();
            //     })()
            // }
        },
        methods: {
            //经销商设备数量
            getCompanyDeviceNum(){
                let para = {
                    pageSize: '5',
                    pageNo: this.distributorPageNo
                }
                get_company_device(para).then(res => {
                    console.log(res);
                    this.deviceList = res.data.list
                    this.distributorTotal = res.data.totalCount
                })
            },
            getDistributor(e){
                this.distributorPageNo = e
                this.getCompanyDeviceNum()
            },
            //设备销售统计切换查询时间
            // selectDate(){
            //     this.getDeviceSales()
            // },
            //默认当前时间前一年的时间
            deafultStartTime(){
                var date = new Date();
                var year = date.getFullYear();
                var month = (date.getMonth()+1).toString().padStart(2,'0');
                var preYear = parseInt(year)-1
                var preMonth = (date.getMonth()+2).toString().padStart(2,'0');
                // var preYear = date.getFullYear();
                // var preMonth = (date.getMonth()).toString().padStart(2,'0');
                // if(preMonth=='00'){
                //     preYear = parseInt(preYear)-1
                //     preMonth = 12
                // }
                // var day = date.getDate().toString().padStart(2,'0');
                var startTime = preYear+'-'+preMonth+'-01';
                var endTime = year+'-'+month+'-01';
                let dataParams = {
                    startTime,
                    endTime
                }
                return dataParams
            },
            //设备销售统计
            getDeviceSales(){
                let para = {
                    startDate: this.timeslot[0],
                    endDate: this.timeslot[1]
                }
                get_device_sales(para).then(res => {
                    // console.log(res);
                    // console.log(JSON.stringify(res.data.activate));
                    this.deviceDateList = res.data.activate.map(item => {return item.days})
                    this.activateList = res.data.activate.map(item => {return item.sums})
                    this.salesedList = res.data.salesed.map(item => {return item.sums})
                    this.warehouseList = res.data.warehouse.map(item => {return item.sums})
                    this.deviceSellChar()
                    // console.log(this.deviceDateList);
                    // console.log(this.activateList);
                    // console.log(this.salesedList);
                    // console.log(this.warehouseList);
                })
            },
            //设备类型统计
            getDeviceType(){
                let para = {
                    pageSize: '8',
                    pageNo: this.devicetypePageNo
                }
                get_device_type(para).then(res=>{
                    console.log(res);
                    if(res.data.list.length>=1){
                        this.deviceTypeList1 = res.data.list.filter((item,index) => {
                            return index < 5
                        })
                        // console.log(list);
                        this.deviceTypeList2 = res.data.list.filter((item,index) => {
                            return index >= 5
                        })
                    }else{
                        this.deviceTypeList1 = res.data.list
                    }
                    this.devicetypeTotal = res.data.totalCount
                })
            },
            devicetypeChange(e){
                this.devicetypePageNo = e
                this.getDeviceType()
            },
            //告警类型统计
            drawAlarmTypeChart(){
                console.log(this.alarm_count)
                this.alarmchart = echarts.init(document.getElementById("alarmType"));
                let bottomVal = Number(this.alarm_count.level0) + Number(this.alarm_count.level1) + Number(this.alarm_count.level2)
                if(bottomVal == 0){
                    bottomVal =1
                }
                this.alarmchart.setOption({
                    series: [{
                        type: 'pie',
                        label: {
                            show: false,
                            position: 'center'
                        },
                        center: ['50%', '50%'],
                        radius: ['45%', '70%'],
                        // emphasis:{
                        //     label: {
                        //         show: true,
                        //         fontSize: 20,
                        //         fontWeight: 'bold'
                        //     }
                        // },
                        startAngle: 180,
                        data: [
                            {
                                name: '一般告警',
                                value: this.alarm_count.level0,
                                // value: '10',
                                itemStyle: {
                                    color: '#245FE6'
                                }
                            },
                            {
                                name: '重要告警',
                                value: this.alarm_count.level1,
                                // value: '2',
                                itemStyle: {
                                    color: '#FFC705'
                                }
                            },
                            {
                                name: '紧急告警',
                                value: this.alarm_count.level2,
                                // value: '1',
                                itemStyle: {
                                    color: '#FF5D4F'
                                }
                            },
                            {
                                // name: 'bottom',
                                // value: Number(this.alarm_count.level0) + Number(this.alarm_count.level1) + Number(this.alarm_count.level2),
                                value: bottomVal,
                                // value: '13',
                                itemStyle: {
                                    color: 'transparent'
                                }
                            },
                        ]
                    }]
                })
            },
            //报警走势图
            drawvertical() {
                // console.log(this.device_mylist)
                this.vertical = echarts.init(document.getElementById("alarms"));
                this.vertical.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                        }
                    },
                    // legend: {
                    //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                    // },
                    // toolbox: {
                    //     feature: {
                    //     saveAsImage: {}
                    //     }
                    // },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                        type: 'category',
                        boundaryGap: false,
                        // data: ['1', '2', '3', '4', '5', '6', '7']
                        data: this.alarmdatelist
                        }
                    ],
                    yAxis: [
                        {
                        type: 'value'
                        }
                    ],
                    series: [
                        {
                        name: '告警次数',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            color: '#FB696C',
                            width: 3
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(254, 167, 169)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(254, 167, 169 , 0)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        // data: [120, 132, 101, 134, 90, 230, 210]
                        data: this.alarmnumlist
                        }
                    ]
                });
            },
            // 设备销售统计
            deviceSellChar(){
                this.sellChar = echarts.init(document.getElementById("devicechart"));
                this.sellChar.setOption({
                    legend: {},
                    tooltip: {},
                    xAxis: { 
                        type: 'category',
                        data: this.deviceDateList
                        // data: ['2022-3','2022-4','2022-5','2022-6','2022-7','2022-8','2022-9','2022-10', '2022-11', '2022-12', '2023-1', '2023-2']
                        // data: ['2023-1']
                     },
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {
                            type: 'bar',
                            name: '生产',
                            // data: [89.3, 92.1, 94.4,89.3, 92.1, 94.4,89.3, 92.1, 94.4,89.3, 92.1, 94.4],
                            data: this.warehouseList,
                            color: ['#5470c6']
                        },
                            {
                            type: 'bar',
                            name: '销售',
                            // data: [35.8, 49.4, 51.2,95.8, 89.4, 81.2,75.8, 89.4, 91.2,95.8, 89.4, 91.2],
                            data: this.salesedList,
                            color: ['#91cc75']
                        },
                        {
                            type: 'bar',
                            name: '激活',
                            // data: [97.7, 83.1, 92],
                            // data: [33.8, 45.4, 48.2,95.8, 80.4, 75.2,70.8, 89.4, 90.2,90.8, 81.4, 91.2],
                            data: this.activateList,
                            color: ['#fac858']
                        }
                    ]
                })
            },
            getCompanyNum(){
                get_companyNum().then(res => {
                    if(res.code == 0){
                        this.companyCount = res.data
                        // this.begCode(res.code, res.message);
                        // this.select_scade1();
                    }
                });
            },
            //告警走势图
            getAlarmlogsum(){
                this.alarmdatelist = []
                this.alarmnumlist = []
                var date = new Date();
                var year = date.getFullYear();
                var month = (date.getMonth()+1).toString().padStart(2,'0');
                var day = date.getDate().toString().padStart(2,'0');
                var time = year+'-'+month+'-'+day;
                let para = {
                    type: 1,
                    num: 30,
                    endDate: time
                }
                get_data_sum(para).then(res => {
                    if(res.code == 0){    
                        for(let i in res.data){
                            this.alarmdatelist.push(res.data[i].days) 
                            this.alarmnumlist.push(res.data[i].sums) 
                        }
                        this.drawvertical()
                        // console.log(this.alarmdatelist)
                        // console.log(this.alarmnumlist)
                    }
                })
            },
            getConversationCount(){
                get_conversationCount().then(res => {
                    if(res.code == 0){
                        this.conversationCount = res.data
                        console.log(res.data);
                    }
                })
            },
            getCountDeviceType(){
                get_countDeviceType().then(res => {
                     if(res.code == 0){
                        this.devicetypeCount = res.data
                    }
                })
            },
            getAlarmlogCount(){
                get_countLevel().then(res => {
                     if(res.code == 0){
                        this.alarm_count = res.data
                        this.drawAlarmTypeChart()
                    }
                })
            },
            progresstext(percentage){
                return percentage = 100
            },
             select_scade1(s) {
                let para = {
                    queryUserId: this.scade,
                    queryCompanyId: this.scade1
                };
                //NProgress.start();
                device_get_user_count(para).then(res => {
                    this.begCode(res.code, res.message);
                    this.linecount = res.data;
                    //NProgress.done();
                    this.drawvertical();
                });
             },
            scade(index, row) {

                // this.$confirm('确认更换吗？', '提示', {}).then(() => {
                let para = {
                    code: 'writeRegister',
                    deviceIdList: [sessionStorage.getItem('facility_details')],
                    attrs: {
                        deviceSlaveSn: row.slaveSn,
                        register: row.register,
                        registerVal: row.registerVal,
                        deviceType: 1
                    }
                };
                this.loading = true;
                //NProgress.start();
                device_cmd(para).then((res) => {
                    if(res.code == 0){
                        this.begCode(res.code,res.message);
                        this.getbodylist();
                        //NProgress.done();
                    }
                });
                // });
            },
            //获取用户列表
            getUser: function () {

                let para = {
                    deviceId: sessionStorage.getItem('facility_details')
                };
                this.loading = true;
                //NProgress.start();
                company_get_my(para).then((res) => {
                    // res.code=403;
                     this.begCode(res.code,res.message);
                    if (res.data) {
                        this.users = res.data.deviceSlaveList;
                        this.facility = res.data;
                        if (res.data.logo) {

                            this.imgUrl = res.data.logo;
                        } else {

                            // this.imgUrl = '/static/img/143217104131987003.png';
                        }
                    }

                    this.loading = false;


                    this.imgloading = false;
                    console.log(this.imgloading)
                });
                let para1 = {
                    token: localStorage.getItem('key')
                }
                userinfo(para1).then((res) => {
                    if(res.code == 0){
                        this.useritem = res.data;
                    }
                localStorage.setItem('user', JSON.stringify(res.data))
                });
                console.log(this.useritem)


            },
            getbodylist() {
                let para = {
                    deviceId: sessionStorage.getItem('facility_details')
                };
                device_recipe_body_list(para).then((res) => {
                     this.begCode(res.code,res.message);
                    for (let i in res.data) {
                        let para1 = {
                            deviceRecipePictureGroupId: res.data[i].deviceRecipePictureGroupId
                        };
                        // if (res.data[i].decimalAccuracy) {

                        //     res.data[i].registerVal = res.data[i].registerVal / Math.pow(10,
                        //         res.data[i].decimalAccuracy);
                        // }
                        if (res.data[i].deviceRecipePictureGroupId) {


                        }
                        let ti = setTimeout(() => {
                            // this.updatelist();
                            // this.device_list = res.data;
                            if (!this.selectlist.name && !this.selectlist.unit) {
                                this.device_list = res.data;
                                return false;
                            }

                            this.device_list = [];
                            for (let i in res.data) {
                                // if(this.selectlist.name==res.data.)
                                if (res.data[i].name.indexOf(this.selectlist.name) >= 0 && this.selectlist
                                    .name != "") {
                                    console.log(res.data[i].communicateStateText)
                                    this.device_list.push(res.data[i]);
                                } else if (res.data[i].writeRead == this.selectlist.unit && this.selectlist
                                    .unit != "") {

                                    this.device_list.push(res.data[i]);
                                }
                            }
                        }, 300);
                        // this.devide_list[i].registerVal=this.devide_list[i].registerVal/


                    }

                    // this.loading = false;
                    //NProgress.done();
                });
            }
        },
    };
</script>

<style scoped>
    .userlist {
        font-size: 14px;
    }

    #allmap {
        height: 300px;
        overflow: hidden;
    }

    .el-row {}

    .el-col {
        border-radius: 4px;
        /* margin-bottom: 10px; */
    }

    .el-row>.el-col {
        border-radius: 4px;
        margin-bottom: 0;
    }



    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .dev-select {
        width: 100px;
        float: right;
        margin: 3px;
    }

    .dev-titles {
        /* display: inline-block;
        line-height: 36px;
        text-indent: 10px;
        color: #fff */
        width: 100%;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        text-indent: 0%;
    }
    .col-background {
        /* padding: 12px 15px; */
        padding: 20px;
        position: relative;
        height: 100%;
        color: #666666;
        background-color: #ffffff;
        border: none;
        border-radius: 5px;
        /* border-top-right-radius: 0;
        border-top-left-radius: 0; */
        position: relative;
        /* margin-bottom: 10px; */
        /* box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25); */
    }
    .Statisticsimage{
        display: flex;
        align-items: center;
        /* width: 4VW;
        height: 4VW;
        border-radius: 50%;
        background: #FFF6F6F6;
        position: relative;
        margin-right: 2vw; */
    }
    .Statisticsimage>span{
        margin-left: 10px;
    }
    .Statisticsimage>img{
        width: 38px;
        height: 38px;
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%); */
    }
    .statistics .el-col{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
    }
    .statisticstitle{
        font-size: 18px;
        font-weight: bold;
        /* margin-bottom: 20px; */
    }
    .statisticstitle+div{
        font-size: 16px;
    }
    .circledata .el-progress{
        margin: 50px 10px;
    }
    .circledata div{
        display: inline-block;
        position: relative;
    }
    .circltext{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .circltext span{
        display: block;
    }
    .devstate{
        /* margin: 16px 0; */
        margin: 8px 0;
        display: flex;
        justify-content: space-between;
    }
    .progresswidth{
        display: inline-block;
        width: 80%;
        margin-left: 10px;
    }
    .monitor-online{
        display: inline-block;
        width: 3vw;
        height: 2vw;
        line-height: 2vw;
        text-align: center;
        /* font-size: 17px; */
        font-size: 14px;
        background-color: #18B05CFF;
        color: #fff;
        padding: 2px 12px;
        border-radius: 7px 0px 0px 7px;
    }
    .monitorall{
        width: 30%;
        background: #B8C3D4FF;
        border-radius: 7px;
        display: flex;
        align-items: center;
    }
    .onlinepeople{
        color: #fff;
        font-size: 20px;
        /* margin-left: 25px; */
        margin: auto;
    }
    .timeslot{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }
    .timeslot span{
        display: inline-block;
        font-weight: normal;
        padding: 0 40px;
        border: 1px solid #CFE3F4FF;
        cursor: pointer;
    }
    .timeslot span:nth-child(1){
        background: #E1EDF6FF;
    }
    .onoffline{
        font-size: 16px;
        color: #42C25C;
    }
    .alarm-color{
        color: #FB696C;
    }
    div::-webkit-scrollbar-thumb{
        background: #c1c1c1;
        border-radius:10px;
    }
    div::-webkit-scrollbar{ 
        width:5px;
    }
    .equipment-type{
        display: inline-block;
        width: calc(100%/4);
        text-align: center;
        margin-top: 10px;
    }
    .top-label{
        width: 25%;
        /* background: red; */
        /* padding: 10px; */
    }
    .top-label-border{
        width: 80%;
        border: 1px solid #E2E6E7;
        border-radius: 12px;
        padding: 20px;
        margin: auto;
    }
    .top-lable-text{
        font-size: 19px;
    }
    .top-label-num{
        font-size: 32px;
        font-weight: bold;
        color: #07233A;
    }
    .top-label-data{
        margin-top: 19px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .alarm-type-middle{
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .alarm-type-bottom{
        position: absolute;
        bottom: 15%;
        left: 50%;
        width: 80%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-around;
    }
    .alarm-num{
        color: #07233A;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    }
    .alarm-text{
        font-size: 19px;
    }
    .color-block{
        position: relative;
    }
    .color-block::after{
        content: '';
        position: absolute;
        width: 8px;
        height: 37px;
        left: -30px;
        top: 25%;
        border-radius: 4px;
    }
    .ordinary-alarm{
        color: #245FE6;
    }
    .ordinary-alarm::after{
        background: #245FE6;
    }
    .important-alarm{
        color: #FFC705;
    }
    .important-alarm::after{
        background: #FFC705;
    }
    .urgent-alarm{
        color: #FF5D4F;
    }
    .urgent-alarm::after{
        background: #FF5D4F;
    }
    .device-type-table{
        float: left;
        overflow: hidden;
        width: 49%;
        margin-top: 20px;
    }
    .tabel-title{
        display: inline-block;
        height: 1.5vh;
        line-height: 1.5vh;
        border: 1px solid #E5E5E5;
        color: #07233A;
        font-size: 19px;
        width: 54%;
        padding: 15px 0;
        background: #FAFAFA;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tabel-title span{
        padding-left: 13px;
    }
    .tabel-num span{
        padding-left: 13px;
    }
    .tabel-num{
        display: inline-block;
        height: 1.5vh;
        line-height: 1.5vh;
        border: 1px solid #E5E5E5;
        font-size: 19px;
        color: #969696;
        width: 36%;
        padding: 15px 0;
    }
    .table-col{
        display: flex;
    }
</style>